<template>
  <el-row :gutter="20">
    <el-col :span="8" v-if="pieType.includes('reason-notsign')" class="relative">
      <el-form class="head mt10 pt10" label-width="40px" style="width:80%;" v-show="showNotsignF">
        <el-row>
          <el-col :span="6" :offset="8">
            <div class="block time-filter">
              <el-date-picker
                v-model="reasonNotsign"
                type="daterange"
                align="left"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions2"
                value-format="yyyy-MM-dd"
                size="mini"
                @change="handleReasonNotsign"
              ></el-date-picker>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div class="filter-btn pointer" @click="handleSwitchNotsignF">
        <i class="fa fa-filter fa-2x filter" aria-hidden="true" style="color: #409EFF;"></i>
        <span style="color: #409EFF;" class="fs16">过滤</span>
      </div>
      <div class="grid-content-pie bg-purple pt20 pl15" id="reason-notsign"></div>
    </el-col>
    <el-col :span="8" class="relative">
      <el-form
        class="head mt10 pt10"
        label-width="40px"
        style="width:80%;"
        v-if="showCancellationF"
      >
        <el-row>
          <el-col :span="6" :offset="8">
            <div class="block time-filter">
              <el-date-picker
                v-model="reasonCancellation"
                type="daterange"
                align="left"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions2"
                value-format="yyyy-MM-dd"
                size="mini"
                @change="handleCancellation"
              ></el-date-picker>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div class="filter-btn pointer" @click="handleSwitchCancellationF">
        <i class="fa fa-filter fa-2x filter" aria-hidden="true" style="color: #409EFF;"></i>
        <span style="color: #409EFF;" class="fs16">过滤</span>
      </div>
      <div class="grid-content-pie bg-purple pt20 pl15" id="reason-cancellation"></div>
    </el-col>
    <el-col :span="8" class="relative" v-if="pieType.includes('distribution')">
      <el-form
        class="head mt10 pt10"
        label-width="40px"
        style="width:80%;"
        v-if="showDistributionF"
      >
        <el-row>
          <el-col :span="6" :offset="8">
            <div class="block time-filter">
              <el-date-picker
                v-model="distribution"
                type="daterange"
                align="left"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions2"
                value-format="yyyy-MM-dd"
                size="mini"
                @change="handleDistribution"
              ></el-date-picker>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div class="filter-btn pointer" @click="handleSwitchDistributionF">
        <i class="fa fa-filter fa-2x filter" aria-hidden="true" style="color: #409EFF;"></i>
        <span style="color: #409EFF;" class="fs16">过滤</span>
      </div>
      <div class="grid-content-pie bg-purple pt20 pl15" id="distribution"></div>
    </el-col>
    <el-col :span="8" class="relative" v-if="pieType.includes('notPass')">
      <el-form class="head mt10 pt10" label-width="40px" style="width:80%;" v-if="showNotPassF">
        <el-row>
          <el-col :span="6" :offset="8">
            <div class="block time-filter">
              <el-date-picker
                v-model="notPass"
                type="daterange"
                align="left"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions2"
                value-format="yyyy-MM-dd"
                size="mini"
                @change="handleNotPass"
              ></el-date-picker>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div class="filter-btn pointer" @click="handleSwitchNotPassF">
        <i class="fa fa-filter fa-2x filter" aria-hidden="true" style="color: #409EFF;"></i>
        <span style="color: #409EFF;" class="fs16">过滤</span>
      </div>
      <div class="grid-content-pie bg-purple pt20 pl15" id="not-pass"></div>
    </el-col>
    <el-col :span="8" class="relative" v-if="pieType.includes('trial')">
      <el-form class="head mt10 pt10" label-width="40px" style="width:80%;" v-if="showTrialF">
        <el-row>
          <el-col :span="6" :offset="8">
            <div class="block time-filter">
              <el-date-picker
                v-model="trial"
                type="daterange"
                align="left"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions2"
                value-format="yyyy-MM-dd"
                size="mini"
                @change="handleTrial"
              ></el-date-picker>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div class="filter-btn pointer" @click="handleSwitchTrialF">
        <i class="fa fa-filter fa-2x filter" aria-hidden="true" style="color: #409EFF;"></i>
        <span style="color: #409EFF;" class="fs16">过滤</span>
      </div>
      <div class="grid-content-pie bg-purple pt20 pl15" id="trial"></div>
    </el-col>
    <el-col :span="8" class="relative" v-if="pieType.includes('buyType')">
      <el-form class="head mt10 pt10" label-width="40px" style="width:80%;" v-if="showBuyTypeF">
        <el-row>
          <el-col :span="6" :offset="8">
            <div class="block time-filter">
              <el-date-picker
                v-model="buyTypeForm"
                size="mini"
                type="year"
                placeholder="选择年"
                value-format="yyyy"
                @change="handleBuyType()"
              ></el-date-picker>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div class="filter-btn pointer" @click="handleSwitchBuyTypeF">
        <i class="fa fa-filter fa-2x filter" aria-hidden="true" style="color: #409EFF;"></i>
        <span style="color: #409EFF;" class="fs16">过滤</span>
      </div>
      <div class="grid-content-pie bg-purple pt20 pl15" id="buyType"></div>
    </el-col>
    <el-col :span="8" class="relative" v-if="pieType.includes('carType')">
      <el-form class="head mt10 pt10" label-width="40px" style="width:80%;" v-if="showCarTypeF">
        <el-row>
          <el-col :span="6" :offset="8">
            <div class="block time-filter">
              <el-date-picker
                v-model="carTypeForm"
                size="mini"
                type="year"
                placeholder="选择年"
                value-format="yyyy"
                @change="handleCarType()"
              ></el-date-picker>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div class="filter-btn pointer" @click="handleSwitchCarTypeF">
        <i class="fa fa-filter fa-2x filter" aria-hidden="true" style="color: #409EFF;"></i>
        <span style="color: #409EFF;" class="fs16">过滤</span>
      </div>
      <div class="grid-content-pie bg-purple pt20 pl15" id="carType"></div>
    </el-col>
  </el-row>
</template>

<script>
import {
  option8,
  option9,
  option10,
  option21,
  option22,
  option33,
  option34,
  pickerOptions2
} from "@/../config/Stats_options";
import { getMonthStartDate, getMonthEndDate } from "@/utils/getCurrMonth";

export default {
  name: "pei",
  data() {
    return {
      buyTypeForm: "2019",
      carTypeForm: "2019",
      showBuyTypeF: false,
      showCarTypeF: false,
      showNotsignF: false,
      showCancellationF: false,
      showDistributionF: false,
      showNotPassF: false,
      showTrialF: false,
      reasonNotsign: [getMonthStartDate(), getMonthEndDate()],
      reasonCancellation: [getMonthStartDate(), getMonthEndDate()],
      distribution: [getMonthStartDate(), getMonthEndDate()],
      notPass: [getMonthStartDate(), getMonthEndDate()],
      trial: [getMonthStartDate(), getMonthEndDate()],
      pickerOptions2
    };
  },
  mounted() {
    if (this.pieType.includes("reason-notsign")) {
      this.handleReasonNotsign();
    }
    if (this.pieType.includes("distribution")) {
      this.handleDistribution();
    }
    if (this.pieType.includes("notPass")) {
      this.handleNotPass();
    }
    if (this.pieType.includes("trial")) {
      this.handleTrial();
    }
    if (this.pieType.includes("buyType")) {
      this.handleBuyType();
    }
    if (this.pieType.includes("carType")) {
      this.handleCarType();
    }
    this.handleCancellation();
  },
  props: ["pieType"],
  methods: {
    handleSwitchBuyTypeF() {
      this.showBuyTypeF = !this.showBuyTypeF;
    },
    handleSwitchCarTypeF() {
      this.showCarTypeF = !this.showCarTypeF;
    },
    handleSwitchNotsignF() {
      this.showNotsignF = !this.showNotsignF;
    },
    handleSwitchCancellationF() {
      this.showCancellationF = !this.showCancellationF;
    },
    handleSwitchDistributionF() {
      this.showDistributionF = !this.showDistributionF;
    },
    handleSwitchNotPassF() {
      this.showNotPassF = !this.showNotPassF;
    },
    handleSwitchTrialF() {
      this.showTrialF = !this.showTrialF;
    },
    handleBuyType() {
      option33.series[0].data = [];
      this.$axios
        .post("/api/statistics/Stats_buyType", {
          time: this.buyTypeForm
        })
        .then(data => {
          option33.series[0].data = data;
        })
        .then(() => {
          this.updateBuyType();
        });
    },
    handleCarType() {
      option34.series[0].data = [];
      this.$axios
        .post("/api/statistics/Stats_carType", {
          time: this.carTypeForm
        })
        .then(data => {
          option34.series[0].data = data;
        })
        .then(() => {
          this.updateCarType();
        });
    },
    handleReasonNotsign() {
      option8.series[0].data = [];
      this.$axios
        .post("/api/statistics/Stats_reasonNotsigns", {
          from: this.reasonNotsign[0],
          to: this.reasonNotsign[1]
        })
        .then(data => {
          option8.series[0].data = data;
        })
        .then(() => {
          this.updateReasonNotsign();
        });
    },
    handleCancellation() {
      option9.series[0].data = [];
      this.$axios
        .post("/api/statistics/Stats_reasonCancellations", {
          from: this.reasonCancellation[0],
          to: this.reasonCancellation[1]
        })
        .then(data => {
          option9.series[0].data = data;
        })
        .then(() => {
          this.updateCancellation();
        });
    },
    handleDistribution() {
      option10.series[0].data = [];
      this.$axios
        .post("/api/statistics/Stats_distributions", {
          from: this.distribution[0],
          to: this.distribution[1]
        })
        .then(data => {
          option10.series[0].data = data;
        })
        .then(() => {
          this.updateDistribution();
        });
    },
    handleNotPass() {
      option21.series[0].data = [];
      this.$axios
        .post("/api/statistics/Stats_notPasss", {
          from: this.notPass[0],
          to: this.notPass[1]
        })
        .then(data => {
          option21.series[0].data = data;
        })
        .then(() => {
          this.updateNotPass();
        });
    },
    handleTrial() {
      option22.series[0].data = [];
      this.$axios
        .post("/api/statistics/Stats_trials", {
          from: this.trial[0],
          to: this.trial[1]
        })
        .then(data => {
          option22.series[0].data = data;
        })
        .then(() => {
          this.updateTrial();
        });
    },
    updateReasonNotsign() {
      let reasonNotsign = this.$echarts.init(
        document.getElementById("reason-notsign")
      );
      reasonNotsign.setOption(option8, true);
    },
    updateCancellation() {
      let reasonCancellation = this.$echarts.init(
        document.getElementById("reason-cancellation")
      );
      reasonCancellation.setOption(option9, true);
    },
    updateDistribution() {
      let distribution = this.$echarts.init(
        document.getElementById("distribution")
      );
      distribution.setOption(option10, true);
    },
    updateNotPass() {
      let notPass = this.$echarts.init(document.getElementById("not-pass"));
      notPass.setOption(option21, true);
    },
    updateTrial() {
      let trial = this.$echarts.init(document.getElementById("trial"));
      trial.setOption(option22, true);
    },
    updateBuyType() {
      let buyType = this.$echarts.init(document.getElementById("buyType"));
      buyType.setOption(option33, true);
    },
    updateCarType() {
      let carType = this.$echarts.init(document.getElementById("carType"));
      carType.setOption(option34, true);
    }
  }
};
</script>
<style>
</style>